<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VSCode</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/less" href="./css/common.less">
  <link rel="stylesheet" type="text/less" href="./css/home.less">
</head>

<body>
  <!-- 头部区域 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container navbar-container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand flex-f" href="#">
          <img src="./img/nav/nav-logo.png" alt="">
          <span>Visual Studio Code</span>
        </a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav nav-hide visible-lg-block">
          <li><a href="#">Docs</a></li>
          <li><a href="#">Updates</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">API</a></li>
          <li><a href="#">Extensions</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="./learn.html">Learn</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="li1 visible-md-block visible-sm-block">
            <a href="#">
              <span class="glyphicon glyphicon-search"></span>
            </a>
          </li>
          <li><a href="#" class="li-a re">
              <input type="text" class="form-control visible-lg-block" placeholder="Search Docs">
            </a></li>
          <li>
            <a href="#" class="link-button">
              <span class="glyphicon glyphicon-arrow-down re"></span>
              Download
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 头部提示 -->
  <section class="tips">
    <div class="container">
      <div class="row text-center ">
        <p class="title"><span>Version 1.71</span> is now available! Read about the new features and fixes from August.
        </p>
      </div>
    </div>
  </section>

  <!-- 介绍区域 -->
  <section class="introduce">
    <div class="container">
      <div class="row">
        <div class="col-md-4 com-xs-12 text-center">
          <h1 class="h1-title">Code editing. Redefined.</h1>
          <p class="p1">Free. Built on open source. Runs everywhere.</p>
          <div class="downBox text-center">
            <div class="down">
              <h4>Download for Windows </h4>
              <span>Stable Build</span>
            </div>
            <span class="down-icon glyphicon glyphicon-menu-down re"></span>

            <div class="message mar re">
              Web, Insiders edition, <span>or</span> other
            </div>
            <p class="p-bot">By using VS Code, you agree to its <br> <span>license and privacy statement.</span></p>
          </div>
        </div>
        <div class="col-md-8 com-xs-12 introduce-rgt">
          <img src="./img/introduce/bg.png" alt="">
        </div>
      </div>
    </div>
  </section>

  <!-- 图标区域 -->
  <section class="photo">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="flex-col pd-2 photo-icon">
            <div class="icon1"></div>
            <p>IntelliSense</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="flex-col pd-2 photo-icon">
            <div class="icon2"></div>
            <p>Run and Debug</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="flex-col pd-2 photo-icon">
            <div class="icon3"></div>
            <p>Built-in Git</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="flex-col pd-2 photo-icon">
            <div class="icon4"></div>
            <p>Extensions</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 轮播区域 -->
  <section class="Carousel mar-6 ">
    <div class="container">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" id="carousel-item">
          </div>
          <div class="item" id="carousel-item2">
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </section>

  <!-- 说明区域 -->
  <section class="state mar-15" id="state"></section>

  <!-- 语言区域 -->
  <section class="language mar-15 pd-6">
    <div class="container">
      <div class="row text-center mar">
        <p class="language-p">VS Code for</p>
        <div class="mar-2 language-cont" id="language-cont">
        </div>
        <div class="language-p2">and many more...</div>
        <div class="language-btn mar-4">Get Start Now</div>
      </div>
    </div>
  </section>

  <!-- 操作系统 -->
  <section class="operation mar-15">
    <div class="container">
      <div class="row text-center mar">
        <div class="col-md-4  col-sm-6 col-xs-12">
          <div class="flex-col pdb-1">
            <div class="ope-img">
              <img src="https://code.visualstudio.com/assets/images/windows-logo.png" alt="">
            </div>
            <div class="ope-btn mar-2 flex-col">
              <p class="ope-p1"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;Windows</p>
              <p class="ope-p2">Windows 8, 10, 11</p>
            </div>
            <div class="ope-bot mar-2 flex">
              <div class="lft">
                <p>User Installer</p>
                <p>System Installer</p>
                <p>.zip</p>
              </div>
              <ul class="rgt">
                <li><span>64 bit</span><span>32 bit</span><span>ARM</span></li>
                <li><span>64 bit</span><span>32 bit</span><span>ARM</span></li>
                <li><span>64 bit</span><span>32 bit</span><span>ARM</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 ope-clear">
          <div class="flex-col">
            <div class="ope-img">
              <img src="https://code.visualstudio.com/assets/images/linux-logo.png" alt="">
            </div>
            <div class="ope-btn ope-QQ mar-2 flex">
              <div class="btn1">
                <p class="ope-p1"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;.deb</p>
                <p class="ope-p2">Debian, Ubuntu</p>
              </div>
              <div class="btn2">
                <p class="ope-p1"><span class="glyphicon glyphicon-arrow-down"></span> .rpm</p>
                <p class="ope-p2">Red Hat, Fedora, SUSE</p>
              </div>
            </div>
            <div class="ope-bot mar-2 flex">
              <div class="lft lft-mar">
                <p>.deb</p>
                <p>.rpm</p>
                <p>.tar.gz</p>
              </div>
              <ul class="rgt">
                <li><span>64 bit</span><span>ARM</span><span>ARM 64</span></li>
                <li><span>64 bit</span><span>ARM</span><span>ARM 64</span></li>
                <li><span>64 bit</span><span>ARM</span><span>ARM 64</span></li>
                <li><span>Snap Store</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 ope-apple re">
          <div class="flex-col pdb-1">
            <div class="ope-img">
              <img src="https://code.visualstudio.com/assets/images/apple-logo.svg" alt="">
            </div>
            <div class="ope-btn mar-2 flex-col">
              <p class="ope-p1"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;Mac</p>
              <p class="ope-p2">macOS 10.11+</p>
            </div>
            <div class="ope-bot mar-2 flex">
              <div class="lft">
                <p>.zip</p>
              </div>
              <ul class="rgt">
                <li class="apple-li"><span>Universal</span><span>Intel Chip</span><span>Apple Silicon</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 文本区域 -->
  <section class="text pd-6">
    <div class="container">
      <div class="row mar text-center">
        <div class="col-md-4">
          <div class="text-lft">
            <p class="p1">Want new features sooner?</p>
            <p class="p2 .mar-2">Get the <span>Insiders build</span> instead.</p>
          </div>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-4">
          <div class="text-rgt">
            <p class="p1">Use <span>vscode.dev</span> for quick edits online!</p>
            <p class="p2 mar-1">GitHub, Azure Repos, and local files.</p>
          </div>
        </div>
        <div class="col-md-12">
          <div class="text-bot mar-4">
            <p class="p1">LICENSE AND PRIVACY TERMS</p>
            <p class="p2">
              By downloading and using Visual Studio Code, you agree to the <span>license terms</span> and <span>privacy
                statement.</span>
              VS Code
              automatically sends telemetry data and crash dumps to help us improve the product. If you would prefer not
              to have this data sent please go see <span>How to Disable Crash Reporting</span> to learn how to disable
              it.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚区域 -->
  <footer class="footer navbar-inverse">
    <div class="container">
      <div class="row">
        <div class="left col-md-7 col-sm-12">
          <ul class="left-ul">
            <li>
              <span>Hello from Seattle.</span>
            </li>
            <li>
              <span>Follow @code</span>
            </li>
            <li>
              <span class="sp3">Start 136,348</span>
            </li>
          </ul>
        </div>
        <div class="right col-md-5 col-sm-12 text-right">
          <ul class="right-ul">
            <li>Support</li>
            <li>Privacy</li>
            <li>Manage Cookies</li>
            <li>Tems of Use</li>
            <li class="last-li">License</li>
          </ul>
        </div>
        <div class="col-md-2 col-md-offset-10 copyRight mar-2">
          <div class="copy-rgt re">
            <div class="ab">
              <img src="https://code.visualstudio.com/assets/images/microsoft-logo.png" alt="">
              <span class="">© 2022 Microsoft</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
  <script src="./js/bootstrap.js"></script>
  <script src="./js/carousel.js"></script>
  <script src="./js/language.js"></script>
  <script src="./js/state.js"></script>
  <script>
    // 取消自动轮播
    $('.carousel').carousel({
      interval: false
    })
  </script>
</body>

</html>